import { useRef } from "react";
import { Button } from "antd";
import { contrlList } from "@/assets/common/local-data";
import { typeEnum } from "@/assets/common/enums";
import type { contrlChildrenType } from "@/types/index";
import SurveyUpload from "./SurveyUpload";
import { ControlContent } from "../stye";

export default function SurveyControl({ deriveContrl = () => {} }: { deriveContrl: (title: string, type: typeEnum) => void }) {
  const uploadRef = useRef<any>(null);
  const clickControl = (contrl: contrlChildrenType) => {
    deriveContrl(contrl.title, contrl.type);
  };

  return (
    <ControlContent>
      {contrlList.map(item => (
        <div className="control-box" key={item.key}>
          <div className="control-title">{item.title}</div>
          <div className="control-list flex-between flex-wrap">
            {item.children.map(children => (
              <div className="control-item" key={children.key} onClick={() => clickControl(children)}>
                {children.icon}
                <span className="control-text">{children.title}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
      <Button type="primary" size="large" block onClick={() => window.open("问卷模板.xlsx")}>
        下载导入问卷模板
      </Button>
      <Button type="primary" size="large" block onClick={() => uploadRef.current.uploadOpen()}>
        导入问卷
      </Button>
      <SurveyUpload ref={uploadRef}></SurveyUpload>
    </ControlContent>
  );
}
